<template>
  <figure>
    <img :src="src" :alt="alt" />
    <figcaption>
      <h4><slot name="title"></slot></h4>
      <p><slot name="cont"></slot></p>
    </figcaption>
    <el-button class="btn btn-link center-block">GET MORE</el-button>
  </figure>
</template>

<script>
export default {
  props: {
    src: String,
    alt: String,
  },
};
</script>

<style lang="less" scoped>
figure {
  position: relative;
  box-shadow: 0 10px 12px -12px #888888;
  box-sizing: border-box;
  padding: 0 0 65px;
  img {
    width: 100%;
  }
  figcaption {
    h4 {
      color: #30a3e3;
      border-bottom: 2px solid #30a3e3;
      /* box-shadow: 6px 6px 5px #888888; */
      font-weight: bold;
      text-align: center;
      font-size: 18px;
    }
    p {
      text-indent: 2em;
      color: #80888a;
    }
  }
  .el-button {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    display: block;
    color: #fff;
    background-color: #30a3e3;
    text-decoration: none;
    margin: 10px auto 0;
    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>